<template>
  <a-spin :spinning="loading">
    <div v-if="dataSource.length" class="flex flex-wrap">
      <template v-for="medicineItem in dataSource" :key="medicineItem.id">
        <div class="w-[20%] item-style px-2.5">
          <div class="flex w-full overflow-hidden justify-between">
            <div class="truncate text-base min-w-8" :title="medicineItem.mc">{{ medicineItem.mc }}</div>
            <div class="flex items-center w-8 text-right">{{ medicineItem.sl || 0 }}g</div>
          </div>
          <div class="use-btn text-grey text-xs mb-1" :class="medicineItem.jf ? 'show' : ''">
            {{ medicineItem.jf }}
          </div>
        </div>
      </template>
    </div>
    <a-empty v-else />
  </a-spin>
</template>
<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  tcid: {
    type: String,
    default: ''
  }
})
const tcmData = ref([])
const params = computed(() => {
  return {
    tcid: props.tcid
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/outp/template/getClinicalOrderPackageItemList',
  params,
  formatResult: (data) => {
    return data.map((item, index) => {
      item.key = index
      return item
    })
  },
  onSuccess: (data) => {
    tcmData.value = data
  }
})
watch(
  () => props.tcid,
  () => {
    getData()
  }
)

defineExpose({
  tcmData
})
</script>
<style lang="less" scoped>
.item-style {
  position: relative;
  display: flex;
  align-items: center;
  height: 80px;
  margin-bottom: -2px;
  margin-left: -2px;
  border-color: var(--border-color);
  border-style: dashed;
  border-width: 2px;
  &:hover,
  &.active {
    background-color: #00000007;
    outline: 1px dashed var(--primary-color);
  }
  .use-btn {
    position: absolute;
    bottom: 2px;
    left: 8px;
  }
}
</style>
